<template>
    <Group :showContent="StyleValue.display == 'flex'" label="显示">
        <a-segmented size="small" class="Segmented" v-model:value="StyleValue.display" :options="display">
            <template #label="{ payload, value }">
                <a-tooltip placement="top" :title="value">
                    <div style="padding: 4px 4px">
                        <div class="C-Flex" v-html="payload"></div>
                    </div>
                </a-tooltip>
            </template>
        </a-segmented>
        <template #Content>
            <div class="title">弹性布局</div>
            <flexCheckBox label="flex-direction" v-model:value="StyleValue.flexDirection" :options="flexDirection"
                defaultValue="row" :direction="false" />
            <flexCheckBox label="flex-wrap" v-model:value="StyleValue.flexWrap" :options="flexWrap"
                defaultValue="nowrap" :direction="['column', 'column-reverse'].includes(StyleValue.flexDirection)" />
            <flexCheckBox label="align-content" v-model:value="StyleValue.alignContent" :options="alignContent"
                defaultValue="normal" :direction="['column', 'column-reverse'].includes(StyleValue.flexDirection)" />
            <flexCheckBox label="justify-content" v-model:value="StyleValue.justifyContent" :options="justifyContent"
                defaultValue="normal" :direction="!['column', 'column-reverse'].includes(StyleValue.flexDirection)" />
            <flexCheckBox label="align-items" v-model:value="StyleValue.alignItems" :options="alignItems"
                defaultValue="normal" :direction="['column', 'column-reverse'].includes(StyleValue.flexDirection)" />
        </template>
    </Group>
</template>
<script setup>
import { reactive, ref } from 'vue';
import Group from '../Base/Group.vue'
import flexCheckBox from '../Base/flexCheckBox.vue';

const GroupView = ref();

const props = defineProps(['StyleValue']);

const display = reactive([
    { value: 'block', payload: '&#xe61c;', },
    { value: 'inline-block', payload: '&#xe61b;', },
    { value: 'inline', payload: '&#xe61d;', },
    { value: 'flex', payload: '&#xe618;', }
]);

const flexDirection = reactive([
    { value: 'row', icon: '&#xe61a;', },
    { value: 'column', icon: '&#xe613;', },
    { value: 'row-reverse', icon: '&#xe615;', },
    { value: 'column-reverse', icon: '&#xe619;', }
]);

const flexWrap = reactive([
    { value: 'nowrap', icon: '&#xe632;', },
    { value: 'wrap', icon: '&#xe631;', },
]);

const alignContent = reactive([
    { value: 'center', icon: '&#xe663;', },
    { value: 'flex-start', icon: '&#xe621;', },
    { value: 'flex-end', icon: '&#xe622;', },
    { value: 'space-around', icon: '&#xe661;', },
    { value: 'space-between', icon: '&#xe65e;', },
    { value: 'stretch', icon: '&#xe660;', },
]);

const justifyContent = reactive([
    { value: 'center', icon: '&#xe663;', },
    { value: 'flex-start', icon: '&#xe621;', },
    { value: 'flex-end', icon: '&#xe622;', },
    { value: 'space-between', icon: '&#xe65e;', },
    { value: 'space-around', icon: '&#xe661;', },
    { value: 'space-evenly', icon: '&#xe623;', },
])
const alignItems = reactive([
    { value: 'center', icon: '&#xe64f;', },
    { value: 'flex-start', icon: '&#xe630;', },
    { value: 'flex-end', icon: '&#xe651;', },
    { value: 'stretch', icon: '&#xe650;', },
    { value: 'baseline', icon: '&#xe64e;', },
])

// align-content: normal






</script>
<style lang="less" scoped>
.Segmented {
    width: 100%;

    :deep(.ant-segmented-item) {
        width: 100%;
    }
}

.title {
    font-size: 12px;
}
</style>